WebCodecs VideoFrame Plane: 비디오 프레임 데이터 액세스 심층 분석

WebCodecs는 웹 기반 미디어 처리의 패러다임 전환을 의미합니다. 이는 미디어의 기본 구성 요소에 대한 저수준 액세스를 제공하여 개발자가 브라우저에서 직접 정교한 애플리케이션을 만들 수 있도록 합니다. WebCodecs의 가장 강력한 기능 중 하나는 VideoFrame 객체이며, 그 안에는 비디오 프레임의 원시 픽셀 데이터를 노출하는 VideoFrame plane이 있습니다. 이 글은 고급 비디오 조작을 위해 VideoFrame plane을 이해하고 활용하는 방법에 대한 포괄적인 가이드를 제공합니다.

VideoFrame 객체 이해하기

plane에 대해 자세히 알아보기 전에 VideoFrame 객체 자체를 다시 살펴보겠습니다. VideoFrame은 비디오의 단일 프레임을 나타냅니다. 여기에는 디코딩(또는 인코딩)된 비디오 데이터와 타임스탬프, 지속 시간, 포맷 정보와 같은 관련 메타데이터가 캡슐화되어 있습니다. VideoFrame API는 다음과 같은 메서드를 제공합니다:

• 픽셀 데이터 읽기: 바로 이 부분에서 plane이 사용됩니다.
• 프레임 복사: 기존 VideoFrame 객체로부터 새로운 객체를 생성합니다.
• 프레임 닫기: 프레임이 보유한 기본 리소스를 해제합니다.

VideoFrame 객체는 일반적으로 VideoDecoder에 의해 디코딩 과정에서 생성되거나, 사용자 지정 프레임을 만들 때 수동으로 생성됩니다.

VideoFrame Plane이란 무엇인가?

VideoFrame의 픽셀 데이터는 종종 여러 개의 plane으로 구성되며, 특히 YUV와 같은 포맷에서 그렇습니다. 각 plane은 이미지의 다른 구성 요소를 나타냅니다. 예를 들어, YUV420 포맷에는 세 개의 plane이 있습니다:

• Y (휘도): 이미지의 밝기(luminance)를 나타냅니다. 이 plane은 흑백 정보를 담고 있습니다.
• U (Cb): 청색차 크로마(색차) 구성 요소를 나타냅니다.
• V (Cr): 적색차 크로마(색차) 구성 요소를 나타냅니다.

RGB 포맷은 겉보기에는 더 간단해 보이지만, 경우에 따라 여러 plane을 사용할 수도 있습니다. plane의 수와 그 의미는 전적으로 VideoFrame의 VideoPixelFormat에 따라 달라집니다.

plane 사용의 장점은 특정 색상 구성 요소에 효율적으로 접근하고 조작할 수 있다는 것입니다. 예를 들어, 색상(U 및 V plane)에 영향을 주지 않고 휘도(Y plane)만 조정할 수 있습니다.

VideoFrame Plane 액세스: API

VideoFrame API는 plane 데이터에 액세스하기 위해 다음 메서드를 제공합니다:

• copyTo(destination, options): VideoFrame의 내용을 다른 VideoFrame, CanvasImageBitmap 또는 ArrayBufferView와 같은 대상에 복사합니다. options 객체는 어떤 plane을 어떻게 복사할지 제어합니다. 이것이 plane 액세스를 위한 주요 메커니즘입니다.

copyTo 메서드의 options 객체를 사용하면 비디오 프레임 데이터의 레이아웃과 대상을 지정할 수 있습니다. 주요 속성은 다음과 같습니다:

• format: 복사될 데이터의 원하는 픽셀 포맷입니다. 이는 원본 VideoFrame과 동일한 포맷일 수도 있고 다른 포맷(예: YUV에서 RGB로 변환)일 수도 있습니다.
• codedWidth 및 codedHeight: 비디오 프레임의 너비와 높이(픽셀 단위)입니다.
• layout: 메모리에서 각 plane의 레이아웃을 설명하는 객체의 배열입니다. 배열의 각 객체는 다음을 지정합니다:
• offset: 데이터 버퍼의 시작 부분부터 plane 데이터의 시작 부분까지의 오프셋(바이트 단위)입니다.
• stride: plane의 각 행 시작 부분 사이의 바이트 수입니다. 이는 패딩을 처리하는 데 중요합니다.

YUV420 VideoFrame을 원시 버퍼로 복사하는 예제를 살펴보겠습니다:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420은 Y, U, V의 3개 plane을 가집니다
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // 리소스를 해제하는 것이 중요합니다
}

설명:

• width와 height를 기반으로 각 plane의 크기를 계산합니다. Y는 전체 해상도이며, U와 V는 서브샘플링(4:2:0)됩니다.
• layout 배열은 메모리 레이아웃을 정의합니다. offset은 각 plane이 버퍼에서 시작하는 위치를 지정하고, stride는 해당 plane의 다음 행으로 이동하기 위해 건너뛸 바이트 수를 지정합니다.
• format 옵션은 일반적인 YUV420 포맷인 'I420'으로 설정됩니다.
• 중요한 점은, 복사 후 리소스를 해제하기 위해 videoFrame.close()를 호출한다는 것입니다.

픽셀 포맷: 가능성의 세계

픽셀 포맷을 이해하는 것은 VideoFrame plane을 다루는 데 필수적입니다. VideoPixelFormat은 색상 정보가 비디오 프레임 내에서 어떻게 인코딩되는지를 정의합니다. 다음은 흔히 접할 수 있는 몇 가지 픽셀 포맷입니다:

• I420 (YUV420p): Y, U, V 구성 요소가 별도의 plane에 저장되는 평면형(planar) YUV 포맷입니다. U와 V는 수평 및 수직 차원 모두에서 2배로 서브샘플링됩니다. 매우 일반적이고 효율적인 포맷입니다.
• NV12 (YUV420sp): Y가 하나의 plane에 저장되고 U와 V 구성 요소가 두 번째 plane에 인터리브(interleaved)되는 준평면형(semi-planar) YUV 포맷입니다.
• RGBA: 빨강, 녹색, 파랑, 알파 구성 요소가 단일 plane에 저장되며, 일반적으로 구성 요소당 8비트(픽셀당 32비트)입니다. 구성 요소의 순서는 다를 수 있습니다(예: BGRA).
• RGB565: 빨강, 녹색, 파랑 구성 요소가 단일 plane에 저장되며, 빨강에 5비트, 녹색에 6비트, 파랑에 5비트(픽셀당 16비트)가 할당됩니다.
• GRAYSCALE: 각 픽셀에 대해 단일 휘도(밝기) 값으로 흑백 이미지를 나타냅니다.

VideoFrame.format 속성은 주어진 프레임의 픽셀 포맷을 알려줍니다. plane에 접근하기 전에 이 속성을 반드시 확인하십시오. 지원되는 포맷의 전체 목록은 WebCodecs 사양을 참조할 수 있습니다.

실제 사용 사례

VideoFrame plane에 접근하면 브라우저에서 고급 비디오 처리를 위한 다양한 가능성이 열립니다. 몇 가지 예시는 다음과 같습니다:

1. 실시간 비디오 효과

VideoFrame의 픽셀 데이터를 조작하여 실시간 비디오 효과를 적용할 수 있습니다. 예를 들어, RGBA 프레임의 각 픽셀에 대한 R, G, B 구성 요소의 평균을 구한 다음 세 구성 요소 모두를 해당 평균값으로 설정하여 흑백 필터를 구현할 수 있습니다. 세피아 톤 효과를 만들거나 밝기 및 대비를 조정할 수도 있습니다.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // 수정된 데이터로 새 VideoFrame 생성
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // 원본 프레임 해제
  return newFrame;
}

2. 컴퓨터 비전 애플리케이션

VideoFrame plane은 컴퓨터 비전 작업에 필요한 픽셀 데이터에 직접적인 액세스를 제공합니다. 이 데이터를 사용하여 객체 감지, 얼굴 인식, 모션 추적 등을 위한 알고리즘을 구현할 수 있습니다. 코드의 성능이 중요한 부분에는 WebAssembly를 활용할 수 있습니다.

예를 들어, 컬러 VideoFrame을 흑백으로 변환한 다음 가장자리 감지 알고리즘(예: 소벨 연산자)을 적용하여 이미지의 가장자리를 식별할 수 있습니다. 이는 객체 인식을 위한 전처리 단계로 사용될 수 있습니다.

3. 비디오 편집 및 합성

VideoFrame plane을 사용하여 자르기, 크기 조정, 회전 및 합성과 같은 비디오 편집 기능을 구현할 수 있습니다. 픽셀 데이터를 직접 조작하여 사용자 지정 전환 및 효과를 만들 수 있습니다.

예를 들어, 픽셀 데이터의 일부만 새 VideoFrame으로 복사하여 VideoFrame을 자를 수 있습니다. 이를 위해 layout의 오프셋과 스트라이드를 적절히 조정해야 합니다.

4. 사용자 지정 코덱 및 트랜스코딩

WebCodecs는 AV1, VP9, H.264와 같은 일반적인 코덱을 기본적으로 지원하지만, 이를 사용하여 사용자 지정 코덱이나 트랜스코딩 파이프라인을 구현할 수도 있습니다. 인코딩 및 디코딩 프로세스를 직접 처리해야 하지만, VideoFrame plane을 사용하면 원시 픽셀 데이터에 액세스하고 조작할 수 있습니다. 이는 특정 비디오 포맷이나 특수한 인코딩 요구 사항에 유용할 수 있습니다.

5. 고급 분석

기본 픽셀 데이터에 액세스함으로써 비디오 콘텐츠에 대한 심층 분석을 수행할 수 있습니다. 여기에는 장면의 평균 밝기 측정, 주요 색상 식별 또는 장면 내용의 변화 감지와 같은 작업이 포함됩니다. 이를 통해 보안, 감시 또는 콘텐츠 분석을 위한 고급 비디오 분석 애플리케이션을 구현할 수 있습니다.

Canvas 및 WebGL 작업

VideoFrame plane의 픽셀 데이터를 직접 조작할 수 있지만, 종종 결과를 화면에 렌더링해야 합니다. CanvasImageBitmap 인터페이스는 VideoFrame과 <canvas> 요소 사이의 다리 역할을 합니다. VideoFrame에서 CanvasImageBitmap을 생성한 다음 drawImage() 메서드를 사용하여 캔버스에 그릴 수 있습니다.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // 비트맵 리소스 해제
  videoFrame.close(); // VideoFrame 리소스 해제
}

더 고급 렌더링을 위해서는 WebGL을 사용할 수 있습니다. VideoFrame plane의 픽셀 데이터를 WebGL 텍스처에 업로드한 다음 셰이더를 사용하여 효과와 변형을 적용할 수 있습니다. 이를 통해 고성능 비디오 처리에 GPU를 활용할 수 있습니다.

성능 고려 사항

원시 픽셀 데이터를 다루는 것은 계산 집약적일 수 있으므로 성능 최적화를 고려하는 것이 중요합니다. 다음은 몇 가지 팁입니다:

• 복사 최소화: 불필요한 픽셀 데이터 복사를 피하십시오. 가능하면 제자리(in-place)에서 작업을 수행하도록 노력하십시오.
• WebAssembly 사용: 코드의 성능이 중요한 부분에는 WebAssembly 사용을 고려하십시오. WebAssembly는 계산 집약적인 작업에 대해 네이티브에 가까운 성능을 제공할 수 있습니다.
• 메모리 레이아웃 최적화: 애플리케이션에 적합한 픽셀 포맷과 메모리 레이아웃을 선택하십시오. 개별 색상 구성 요소에 자주 액세스할 필요가 없다면 압축(packed) 포맷(예: RGBA) 사용을 고려하십시오.
• OffscreenCanvas 사용: 백그라운드 처리를 위해 OffscreenCanvas를 사용하여 메인 스레드를 차단하지 않도록 하십시오.
• 코드 프로파일링: 브라우저 개발자 도구를 사용하여 코드를 프로파일링하고 성능 병목 현상을 식별하십시오.

브라우저 호환성

WebCodecs 및 VideoFrame API는 Chrome, Firefox, Safari를 포함한 대부분의 최신 브라우저에서 지원됩니다. 그러나 지원 수준은 브라우저 버전 및 운영 체제에 따라 다를 수 있습니다. MDN Web Docs와 같은 사이트에서 최신 브라우저 호환성 표를 확인하여 사용하려는 기능이 대상 브라우저에서 지원되는지 확인하십시오. 크로스 브라우저 호환성을 위해서는 기능 감지(feature detection)가 권장됩니다.

일반적인 함정과 문제 해결

VideoFrame plane 작업 시 피해야 할 몇 가지 일반적인 함정은 다음과 같습니다:

• 잘못된 레이아웃: layout 배열이 픽셀 데이터의 메모리 레이아웃을 정확하게 설명하는지 확인하십시오. 잘못된 오프셋이나 스트라이드는 손상된 이미지로 이어질 수 있습니다.
• 일치하지 않는 픽셀 포맷: copyTo 메서드에 지정하는 픽셀 포맷이 VideoFrame의 실제 포맷과 일치하는지 확인하십시오.
• 메모리 누수: VideoFrame 및 CanvasImageBitmap 객체 사용이 끝나면 항상 닫아서 기본 리소스를 해제하십시오. 그렇게 하지 않으면 메모리 누수가 발생할 수 있습니다.
• 비동기 작업: copyTo는 비동기 작업임을 기억하십시오. 픽셀 데이터에 액세스하기 전에 복사 작업이 완료되도록 await를 사용하십시오.
• 보안 제한: 다른 출처(cross-origin)의 비디오에서 픽셀 데이터에 액세스할 때 적용될 수 있는 보안 제한에 유의하십시오.

예제: YUV에서 RGB로 변환

더 복잡한 예로, YUV420 VideoFrame을 RGB VideoFrame으로 변환하는 것을 고려해 보겠습니다. 이는 Y, U, V plane을 읽고 이를 RGB 값으로 변환한 다음 새로운 RGB VideoFrame을 생성하는 과정을 포함합니다.

이 변환은 다음 공식을 사용하여 구현할 수 있습니다:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

코드는 다음과 같습니다:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // 원본 프레임 해제
  return newFrame;
}

이 예제는 VideoFrame plane 작업의 강력함과 복잡성을 보여줍니다. 이를 위해서는 픽셀 포맷, 메모리 레이아웃 및 색 공간 변환에 대한 충분한 이해가 필요합니다.

결론

WebCodecs의 VideoFrame plane API는 브라우저에서 비디오 처리에 대한 새로운 차원의 제어권을 제공합니다. 픽셀 데이터에 직접 액세스하고 조작하는 방법을 이해함으로써 실시간 비디오 효과, 컴퓨터 비전, 비디오 편집 등을 위한 고급 애플리케이션을 만들 수 있습니다. VideoFrame plane 작업이 어려울 수 있지만, 잠재적인 보상은 상당합니다. WebCodecs가 계속 발전함에 따라, 미디어를 다루는 웹 개발자에게 필수적인 도구가 될 것입니다.

VideoFrame plane API를 실험하고 그 기능을 탐색해 보시기를 권장합니다. 기본 원리를 이해하고 모범 사례를 적용함으로써 브라우저에서 가능한 것의 경계를 넓히는 혁신적이고 성능이 뛰어난 비디오 애플리케이션을 만들 수 있습니다.

추가 학습 자료

• MDN Web Docs의 WebCodecs
• WebCodecs 사양
• GitHub의 WebCodecs 샘플 코드 저장소.